<script>
  export default {
    data() {
      return {
        confirm_disabled:false,
        loginForm:{
          no:'',
          password:''
        },
        rules:{
          no:[
            { required:true,message:'请输入账号',trigger:'blur'}
          ],
          password:[
            { required:true,message:'请输入密码',trigger:'blur'}
          ],
        }
      };
    },

    methods: {
      confirm(){
        this.confirm_disabled=true
        this.$refs.loginForm.validate((valid) => {
          if(valid){
            this.$axios.post(this.$httpurl+'/user/login',this.loginForm).then(res=>res.data).then(res=>{
              console.log(res)
              if(res.code==200){
                sessionStorage.setItem("CurUser",JSON.stringify(res.data.user))

                console.log(res.data.menu)
                this.$store.commit("setMenu",res.data.menu)
                this.$router.replace('/MyIndex')
              }else{
                this.confirm_disabled=false;
                alert('校验失败，用户名或密码错误!');
                return false;
              }
            });
          }else {
            this.confirm_disabled=false
            console.log('校验失败')
            return false
          }
        })
      }
    }
  };
</script>

<template>

  <div class="login-box">
    <h2>Login</h2>
       <el-form :model="loginForm" label-width="100px"
                :rules="rules" ref="loginForm" style="margin-left: 0px">
         <el-form-item label="username" prop="no" style="margin-left: 0px">

             <el-input class="transparent-input" style="" type="text" v-model="loginForm.no"
                       autocomplete="off" size="small"></el-input>

         </el-form-item>

         <el-form-item label="password" prop="password">

             <el-input class="transparent-input" style="" type="password" v-model="loginForm.password"
                       show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>

         </el-form-item>

         <el-form-item>
           <el-button class="button1" type="primary" @click="confirm" :disabled="confirm_disabled">login</el-button>
         </el-form-item>

       </el-form>
  </div>

</template>
<style>

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  //background: url(../img/bg01.jpg) no-repeat center 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/bg01.jpg) no-repeat center 0px;
  background-size: cover;
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;

}
 .login-box{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     width: 400px;
     padding:30px;
     background: rgba(0,0,0,.8);
     box-sizing: border-box;
     box-shadow: 0 15px 25px rgba(198, 175, 175, 0.5);
     border-radius: 10px;
     height: 300px;
     }
 .login-box h2{
     margin: 0 0 30px;
     padding: 0;
     text-align: center;
     color: #fff;
     }
 .login-box .login-field{
     position: relative;
     }
 .input1{
     width: 100%;
     height: 20px;
     padding: 10px 0;
     font-size: 16px;
     color: #ffffff;
     margin-bottom: 10px;
     border: none;
     border-bottom: 1px solid #ffffff;
     outline: none;
     background: transparent;
     }
 .login-box .login-field label{
     position: absolute;
     top: 0;
     left: 0;
     letter-spacing: 1px;
     padding: 10px 0;
     font-size: 16px;
     color: #fff;
     pointer-events: none;
     transition: .5s;
     }
 .login-box .login-field input:focus ~ label,
 .login-box .login-field input:valid ~ label{
     top: -33px;
     left: 0;
     color: aqua;
     font-size: 12px;
     }
 .button1{
     background: transparent;
     border: none;
     outline: none;
     color: #fff;
     background: #03a9f4;
     padding: 10px 20px;
     cursor: pointer;
     border-radius: 5px;
     }
  form{
    height: 250px;
  }
/* 在 <style> 标签中 */
.transparent-input .el-input__inner {
  background-color: transparent !important; /* 设置输入框背景为透明 */
  border: none !important; /* 移除边框 */
  border-bottom: 1px solid #dcdfe6 !important; /* 添加下横线 */
  border-radius: 0 !important; /* 移除圆角 */
  color: #ffffff !important; /* 设置输入字符颜色为深白色 */
  transition: border-color 0.3s; /* 过渡效果 */
}

.transparent-input .el-input__inner:focus {
  border-bottom-color: #409eff !important; /* 点击或聚焦时下横线颜色 */
}

.transparent-input .el-input__inner::placeholder {
  color: #c0c4cc; /* 占位符颜色 */
}

.transparent-input .el-input__inner:hover {
  border-bottom-color: #909399 !important; /* 鼠标悬停时下横线颜色 */
}
</style>